<template>
	<!-- 自定义导航栏 -->
	<u-navbar title="我的员工" :border-bottom="false" title-size="28" title-color="#333">
		<view slot="right" class="right">
			<text @click="confirm" style="color: #00c582; font-size: 28rpx">确认</text>
		</view>
	</u-navbar>
	
	<view class="chooseManager-container">
		<z-paging ref="paging" :fixed="false" v-model="managerList" @query="queryList">
			<template #loadingMoreNoMore>
				<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
			</template>

			<template #empty></template>

			<view @click="staffHandle(item)" v-for="item in 13" :key="item" :class="{ 'staff-item': true, 'active-item': item == currentStaff }">
				<view class="item-top">
					<view class="date">2024-12-12 12:30:30</view>
				</view>
				<view class="item-bottom">
					<view class="name">啦啦啦</view>
					<view class="phone">13999999999</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 经理列表查询
const managerList = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	paging.value.complete([1, 2, 3, 4]);
};

// 选择经理
const currentStaff = ref(null);
const staffHandle = (item) => {
	console.log(item);
	currentStaff.value = item;
};

// 确认选择
const confirm = () => {
	uni.$emit('chooseStaff', currentStaff.value);
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.chooseManager-container {
	height: calc(100vh - 188rpx);
	padding: 24rpx;
	background-color: #f9f9f9;

	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	.staff-item {
		padding: 24rpx;
		border-radius: 24rpx;
		background-color: #fff;
		margin-bottom: 24rpx;
		border: 2rpx solid #fff;

		.item-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 24rpx;
			border-bottom: 2rpx solid #f0f0f0;

			.date {
				color: #999;
				font-size: 24rpx;
				line-height: 40rpx;
			}
		}

		.item-bottom {
			color: #333;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			padding-top: 24rpx;

			.name {
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
			}

			.phone {
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}

	.active-item {
		border: 2rpx solid #00c582;
	}
}
</style>
